
{%load filters%}
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% block title %}
  <title>给点知识</title>
  {% endblock title %}
  <link rel="shortcut icon" href="{% static 'favicon.ico'%}">
  <link rel="stylesheet" href="{% static 'css/bootstrap-grid.min.css'%}">
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
  <link rel="stylesheet" href="{% static 'css/bootstrap-reboot.min.css'%}">
  <link rel="stylesheet" href="{% static 'css/main.css'%}">
  <link rel="stylesheet" href="{% static 'css/bootstrap-icons.css'%}">
  <script src="{% static 'js/jquery.min.js'%}"></script>
  <script src="{% static 'js/bootstrap.bundle.min.js'%}"></script>
  <script type="text/javascript" charset="utf-8" src="{% static 'js/ueditor/ueditor.config.js'%}"></script>
  <script type="text/javascript" charset="utf-8" src="{% static 'js/ueditor/editor_api.js'%}"></script>
  <script type="text/javascript" src="{% static 'js/ueditor/third-party/SyntaxHighlighter/shCore.js'%}"></script>   
  <link rel="stylesheet" href="{% static 'js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css'%}" type="text/css" />  
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?5d8b66acb94cd80c63d047b8d8811481";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
    
</head>

<body>
  <div class="contain">
    <!--S 头部信息 -->
    {% block header %}
    <div class="row">
      <div class="col-sm">
        <nav class="navbar navbar-expand-lg" style="background-color: #28394b;z-index:999;">
          <a class="navbar-brand" style="color: #eee;" href="/">给点知识</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin: 0 0 0 3%;">
            <ul class="navbar-nav mr-auto justify-content-center">
              <li class="nav-item active">
                <a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">原理市场</a>
              </li>
              {% if request.COOKIES.username and request.COOKIES.token %}
              <li class="nav-item dropdown" style="color: #eee;" >
                <span style="cursor: pointer;" class="nav-link dropdown-toggle" id="navbarDropdown"
                  data-toggle="dropdown" aria-expanded="false">
                  原理文章
                </span>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="{% url 'note_add' %}">添加原理</a>
                  <a class="dropdown-item" href="{% url 'note_list' %}">我的原理</a>
                </div>
              </li>
              {% endif %}
              <li class="nav-item">
                <a class="nav-link" href="#" style="">网站导航</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" style="">关于我们</a>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="输入关键字" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" style="background-color: #e9e9e9;"
                type="submit">Search</button>
            </form>
          </div>
          <div style="margin-left: 14px;margin-right: 40px;">
            {% if request.COOKIES.username and request.COOKIES.token %}
            <span href="#" class="badge " style="color: aliceblue;">
              <div class="btn-group">
                <button  class="btn btn-outline-warning dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
                  {% if request.COOKIES.qq  %}
                  <img src="{{request.COOKIES.figureurl}}" width="25%" alt="" title="">
                  {% else %}
                  <img src="/static/{{request.COOKIES.figureurl}}" width="25%" alt="" title="">
                  <!-- <a href="{% url 'logout' %} " class="btn btn-danger btn-sm" onclick="clearAllCookie()">退出</a> -->
                  {% endif %}
                  {{request.COOKIES.username | username_to_cn}}
                </button>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">个人中心</a>
                  <a class="dropdown-item" href="#">我的原理</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="{% url 'logout' %} ">退出</a>
                </div>
              </div>
            </span>
            {% else %}
            <a href="{% url 'user_register' %} " class="btn btn-warning btn-sm">免费注册</a>
            <a href="{% url 'user_login' %}" class="btn btn-primary btn-sm">登录</a>
            {% endif %}
          </div>
        </nav>
      </div>
    </div>
    {% endblock header %}
    <!--E 头部导航 -->
    <!--S 面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        {% block breadcrumb %}
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        {% endblock breadcrumb %}
      </ol>
    </nav>
    <!--E 面包屑导航 -->
    <div class="content">
      <!--S 中间内容 -->
      {% block content %}
      <div class="row">
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
      </div>
      {% endblock content %}
    </div>
    <!--E 中间内容 -->
    <!--S 页脚内容 -->
    {% block footer%}
    <div class="footer" style="background-color: #28394b;">
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <!--S 学习交流 -->
          <div class="row">
            <div class="col text-center">
              <ul class="nav justify-content-center">
                <li class="nav-item">
                  <a class="nav-link active" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="qqLoginBtn" href="#">联系我们</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="#">学习交流</a>
                </li>
                <li class="nav-item">
                  <div class="media">
                    <img style="width: 35px;margin-top:2px;" src="{% static 'images/old_logo.jpg'%}"
                      class="img-responsive center-block mr-1" alt="...">
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--E 学习交流 -->

          <!--S qq群和qq登录 -->
          <div class="row">
            <div class="col text-center">
              <a target="_blank"
                href="https://qm.qq.com/cgi-bin/qm/qr?k=3QkC3MVbyc_HGhuPqlxsuZB88DD59Psk&jump_from=webapi">
                <img src="//pub.idqqimg.com/wpa/images/group.png" alt="qq群：495421148" title="qq群：495421148">
              </a>
              {% if not request.COOKIES.username %}
              <span class="btn" onclick="qqLogin()"><img src="{% static 'images/qq_login2.png'%}" alt="qq登录" title="QQ登录"></span>
              {%csrf_token%}
              {% endif %}
            </div>
          </div>
        </div>
        <!--E qq群和qq登录 -->

        <div class="col-sm-3" >
          <div class="row">
            <div class="col-sm">
              <div class="card"  style="background-color: #28394b;">
                <div class="card-body">
                  <div class="badge badge-light" >距<span class="card-text">高考</span>剩<span class="card-text" id="gk_id">80</span></div>
                  <div class="badge badge-success" >距<span class="card-text">考研</span>剩<span class="card-text" id="ky_id">80</span></div>
                  <div class="badge badge-danger" >距<span class="card-text">上半年软考</span>剩<span class="card-text" id="rku_id">80</span></div>
                  <div class="badge badge-warning" >距<span class="card-text">下半年软考</span>剩<span class="card-text" id="rkd_id">80</span></div>
                  <div class="badge badge-primary" role="alert"><span id="runtime" style="font-size: 14px;" class="card-text" ></span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
              <div style="text-align:center;">
                
              </div>
              <div class="col-sm-2">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--S 统计信息 -->
      {% block statistical%}
      {% endblock statistical %}
      <!-- 统计信息 -->

      <!--E S 备案信息 -->
      {% block beian%}
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <div style="text-align:center;">
            <p>
              <span style="font-size: 14px;color: #aaa;">Copyright©2022 给点知识 </span>
              <a style="color:#aaa;font-size: 14px;" target="_blank"
                href="https://beian.miit.gov.cn/#/Integrated/index">
                豫ICP备2022000885号-1
              </a>
            </p>
          </div>
          <div class="col-sm-2">
          </div>
        </div>
      </div>
      {% endblock beian%}
      <!-- E 备案信息 -->

    </div>
    {% endblock footer%}
    <!--E 页脚内容 -->
  </div>


  
  <!--S 错误提示窗口 -->
  {% block error_tip%}
  <!-- Modal -->
  <div class="modal fade" id="model_tip" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="model_title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id='model_content'>
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  {% endblock error_tip%}
  <!--E 错误提示窗口 -->
  
  {% block script%}
  <script>
    $(document).ready(function(){
      // 网站运行时间
      SyntaxHighlighter.all()
      setInterval(function(){   
          var urodz = new Date("2022-02-15 18:09:09");
          var nowTime = new Date();   
          var dateDiff = nowTime - urodz;
          var days = Math.floor(dateDiff/(24*3600*1000))
          var hours = Math.floor((dateDiff % (24*3600*1000))/(3600*1000))
          var minutes = Math.floor(((dateDiff % (24*3600*1000))%(3600*1000))/(60*1000))
          var seconds = Math.floor(((dateDiff % (24*3600*1000))%(3600*1000))%(60*1000)/1000)
          if (seconds < 10){
              seconds = '0'+seconds;
          }
          if (minutes < 10){
            minutes = '0'+minutes;
          }
          if (hours < 10){
            hours = '0'+hours;
          }
          document.getElementById('runtime').innerHTML="本站已横行互联网:" + days + "天" + hours + ":" +minutes + ":" +seconds 
          // d.innerHTML='当前时间:'+year+'年'+mon+'月'+da+'日'+'星期'+day+' '+h+':'+m+':'+s;  
      },1000);
      // 高考倒计时
      setInterval(function(){countDown("06-07 00:00:00",'gk_id')},1000);
      // 考研倒计时
      setInterval(function(){countDown("12-24 00:00:00",'ky_id')},1000);
      // 上半年软考倒计时
      setInterval(function(){countDown("05-29 00:00:00",'rku_id')},1000);
      // 下半年软考倒计时
      setInterval(function(){countDown("11-06 00:00:00",'rkd_id')},1000);
    })
    // 倒计时方法
    function countDown(timeStr,elementId) {
        let currentYear =  new Date().getFullYear();
        var nowtime = new Date(),  //获取当前时间
        timeStr = currentYear+'-'+timeStr;
        endtime = new Date(timeStr);  //定义结束时间
        var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
        if (lefts < 10){
          lefts = '0'+ lefts;
        }
        if (leftm < 10){
          leftm = '0'+ leftm;
        }
        if (lefth < 10){
          lefth = '0'+ lefth;
        }
        document.getElementById(elementId).innerHTML = leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
    }
    // 设置cookie
    function Setcookie(name, value) {
      var expdate = new Date();   //初始化时间
      expdate.setTime(expdate.getTime() + 24 * 60 * 60 * 1000);   //时间单位毫秒
      document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString() + ";path=/";
    }
    function getCookie(name) {
      var cookies = document.cookie;
      var list = cookies.split("; ");     // 解析出名/值对列表

      for (var i = 0; i < list.length; i++) {
        var arr = list[i].split("=");   // 解析出名和值
        if (arr[0] == name)
          return decodeURIComponent(arr[1]);   // 对cookie值解码
      }
      return "";
    }

    //清除所有cookie函数
    function clearAllCookie() {
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
      if (keys) {
        for (var i = keys.length; i--;)
          document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
      }
    }
  </script>

  <!--  qq登录 -->
  <script type="text/javascript">
    // QQ登录框
    function openWindow(url, width, height)
      {
        width = width || 600;
        height = height || 400;
        var left = (window.screen.width - width) / 2;
        var top = (window.screen.height - height) / 2;
        window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);
      }
    // QQ登录函数
    function qqLogin()
    {
      var qqAppId = '101992499'; // 上面申请得到的appid
      var qqAuthPath = 'https://kkndme.xyz/user/qqLogin'; // 前面设置的回调地址
      var state = $("input[name='csrfmiddlewaretoken']").val(); // 防止CSRF攻击的随机参数，必传，登录成功之后会回传，最好后台自己生成然后校验合法性
      window.open(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&state=${state}&redirect_uri=${encodeURIComponent(qqAuthPath)}`);
      // openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);
    }
    
  </script>
  {% endblock script%}

  {% block style%}
  <style>
    .breadcrumb {
      position: relative;
      align-content: center;
      z-index: inherit;
      height: 12px;
      font-size: 12px;
    }
    /* 奋斗区样式 */
    .card-text{
      color: #333;
    }
    /* 汉堡切换 */
    .navbar-toggler-icon{
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
  </style>
  {% endblock style%}
</body>

</html>